<template>
  <Page title='练习记录' @gesture='onGesture' :on-page-back='onPageBack'>
    <template #content>
      <div class='w-full h-full p-20px box-border'>
        <div class='englishWritingRecord box-border flex flex-col'>
          <div class='page-title'>
            <span>总练习次数:</span>
            <span class='color-blue'>{{ total }}</span>
            <el-checkbox class='checkbox' v-model='checked'>仅看低于70分</el-checkbox>
          </div>
          <div class='container'>
            <scroll-view
              ref='scroll'
              class='flex-1 overflow-scroll'
              @scrolltolower='onScrollToLower'
            >
              <div v-for='(item,index) in list' :key='index' class='card-item' @click='toResult(item)'>
                <div class='left'>
                  <div class='title'>{{ item.title }}</div>
                  <div class='info'>{{ item.createTime }}</div>
                </div>
                <div class='right'>
                  <div class='relative'>
                    <div class='text'>{{ convertScore(item.score, 15) }}</div>
                    <img class='icon' :src='getIconUrl(item.score)' mode='' />
                  </div>
                  <div class='text-center'>得分</div>
                </div>
              </div>
              <load-more
                cssStyle='padding-top:0.14rem'
                :loading='loading'
                :has-more='isHasMore'
                @click='onScrollToLower'
              />
            </scroll-view>

          </div>
        </div>
      </div>
    </template>
  </Page>
</template>
<script>
import Page from '@/components/page/index.vue'
import { getEssayTrainPageApi } from '@/api/correct-english'
import HomeworkList from '@/views/homework/index/components/homework-list.vue'
import LoadMore from '@/components/load-more/index.vue'
import ScrollView from '@/components/scroll-view/index.vue'

export default {
  components: {
    ScrollView, LoadMore, HomeworkList,
    Page
  },
  data() {
    return {
      list: [],
      checked: false,
      pageNo: 1,
      pageSize: 5,
      total: 0,
      loading: false,
      isHasMore: true
    }
  },
  computed: {
    total() {
      return this.list.length
    }
  },
  watch: {
    checked() {
      this.init()
    }
  },
  methods: {
    init() {
      this.pageNo = 1
      this.list = []
      this.isHasMore = true
      this.getData()
    },
    onScrollToLower() {
      if (this.isHasMore) {
        this.pageNo++
        this.getData()
      }
    },
    getData() {
      if (this.loading) return
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        type: 2,
        score: this.checked ? 10.5 : undefined
      }
      this.loading = true
      getEssayTrainPageApi(params).then(res => {
        if (res.data && res.data.list) {
          this.list = this.list.concat(res.data.list)
          this.total = res.data.total
          if (res.data.list.length < this.pageSize) {
            this.isHasMore = false
          }
        }
        this.loading = false
      })
    },
    toResult(item) {
      this.$router.push({
        path: '/pages/correct/english/result',
        query: {
          fileUrl: item.fileUrl
        }
      })
    },
    convertScore(score, base = 100) {
      return Math.round(score / base * 100)
    },
    getIconUrl(s){
      let score = this.convertScore(s,15)
      if(score>=80){
        return 'static/icons/level-high.png'
      }
      if(score>=40){
        return 'static/icons/level-middle-yellow.png'
      }
      return 'static/icons/level-low.png'
    },
    onPageBack() {
      this.$router.back()
    },
    onGesture(e) {
      console.log('onGesture', e)
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang='scss'>
.englishWritingRecord {
  font-size: 20px;
  color: #333333;
  height: 100%;

  .page-title {
    display: flex;
    margin-bottom: 20px;
    align-items: center;

    .color-blue {
      color: #51C3FF;
    }

    .checkbox {
      margin-left: 20px;
      font-size: 18px;
    }
  }

  .container {
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    height: calc(100% - 105px);
    display: flex;
    flex-direction: column;

    .card-item {
      display: flex;
      justify-content: space-between;
      padding: 15px;
      border: 1px solid #E8E8E8;
      border-radius: 10px;
      margin-bottom: 20px;

      .left {
        .title {
          font-size: 22px;
          color: #333333;
          font-weight: 500;
          margin-bottom: 10px;
        }

        .info {
          font-size: 16px;
          color: #A3A3A3;
        }
      }

      .right {
        font-size: 16px;
        color: #333333;

        .text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -60%);
          color: #fff;
          font-size: 20px;
        }

        .icon {
          width: 50px;
          height: 50px;
        }
      }
    }
  }
}
</style>
